//import 导入 意为 '导入 模块儿 从 react 模块儿导入'
import React,{ Component } from 'react';
import {
    AppRegistry, // 注册APP入口
    StyleSheet, //样式表组件
    Image,//添加Image组件
    TextInput,//引入TextInput组件
    Text, //文字组件,它里面只能放文字 类似于 span 标签
    View //结构组件,它类似于 div 标签
} from 'react-native';


//创建一个 MyApp 组件
class MyApp extends Component{
    constructor(){
        super();
        this.state={
            value:'',
            bol:false
        };
    };
    changeFun(val){
        var bolLog = val?true:false;
        this.setState({
            val:val,
            bol:bolLog
        });
    };

    hideView(val){
        this.setState({
            val:val,
            bol:false
        });
    };


    render(){
        return(
          <View>

            <View style={styles.wp}>
               <TextInput style={styles.input}
                placeholder = '请输入内容...'
                placeholderTextColor = '#00f'
                returnKeyType='go'
                onChangeText={this.changeFun.bind(this)}
                value={this.state.val}
               />

             <Text style={styles.btn}>搜索</Text>

            </View>

            {this.state.bol?
             <View>
               <Text onPress={this.hideView.bind(this,this.state.val+'春色满园关不住')}>{this.state.val}春色满园关不住</Text>
               <Text onPress={this.hideView.bind(this,this.state.val+'一树梨花压海棠')}>{this.state.val}一树梨花压海棠</Text>
               <Text onPress={this.hideView.bind(this,this.state.val+'数风流人物')}>{this.state.val}数风流人物</Text>
               <Text onPress={this.hideView.bind(this,this.state.val+'一杯浊酒喜相逢')}>{this.state.val}一杯浊酒喜相逢</Text>
             </View>
             :null
             }

        </View>
        );
    };



};



//设置样式
const styles = StyleSheet.create({
   wp:{
       marginTop:40,
       height:40,
       flexDirection:'row'
   },
   input:{
       borderWidth:1,
       borderColor:'pink',
       height:38,
       lineHeight:38,
       paddingLeft:12,
       flex:1
   },

   btn:{
       height:38,
       lineHeight:38,
       width:50,
       fontSize:20,
       color:'#fff',
       backgroundColor:'hotpink',
       borderRadius:5,
       marginLeft:10,
       paddingLeft:6
   }

});


//注册app,其中 'myapp'是指工程名,'MyApp'是创建的组件名
AppRegistry.registerComponent('myapp', () => MyApp);